<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LOVE - 爱心动画</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #000;
            overflow: hidden;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Pacifico', cursive;
            perspective: 800px;
        }

        .hearts-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .heart {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #ff6b9d;
            border-radius: 50%;
            box-shadow:
                0 0 20px #ff2e86,
                0 0 40px #ff2e86,
                0 0 60px #ff2e86;
            animation: float 4s infinite linear;
        }

        .heart::before,
        .heart::after {
            content: '';
            position: absolute;
            top: 0;
            width: 20px;
            height: 20px;
            background: #ff6b9d;
            border-radius: 50%;
        }

        .heart::before {
            left: -10px;
        }

        .heart::after {
            top: -10px;
        }

        @keyframes float {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

            100% {
                transform: translateY(-100vh) rotate(360deg);
                opacity: 0;
            }
        }

        .message-container {
            position: relative;
            z-index: 10;
            text-align: center;
        }

        .love-text {
            font-size: 7rem;
            background: linear-gradient(to right, #56c5ff, #8ae0ff, #56c5ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow:
                0 0 20px rgba(86, 197, 255, 0.7),
                0 0 40px rgba(86, 197, 255, 0.5),
                0 0 60px rgba(86, 197, 255, 0.3);
            animation: pulse 2s infinite alternate, floatText 4s infinite ease-in-out;
            position: relative;
            letter-spacing: 3px;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 0.8;
            }

            100% {
                transform: scale(1.1);
                opacity: 1;
            }
        }

        @keyframes floatText {

            0%,
            100% {
                transform: translateY(0) rotate(0deg);
            }

            25% {
                transform: translateY(-10px) rotate(2deg);
            }

            75% {
                transform: translateY(10px) rotate(-2deg);
            }
        }

        .love-text::before,
        .love-text::after {
            content: "❤";
            position: absolute;
            font-size: 1.5rem;
            color: #ff6b9d;
            text-shadow:
                0 0 10px rgba(255, 43, 134, 0.8),
                0 0 20px rgba(255, 43, 134, 0.6);
        }

        .love-text::before {
            top: -30px;
            left: -30px;
            animation: beat 1s infinite;
        }

        .love-text::after {
            bottom: -30px;
            right: -30px;
            animation: beat 1s infinite reverse;
        }

        @keyframes beat {
            0% {
                transform: scale(0.8);
            }

            50% {
                transform: scale(1.2);
            }

            100% {
                transform: scale(0.8);
            }
        }
    </style>
</head>

<body>
    <div class="hearts-container" id="hearts"></div>

    <div class="message-container">
        <div class="love-text">I LOVE U</div>
    </div>

    <script>
        // 生成满屏的爱心
        function createHearts() {
            const container = document.getElementById('hearts');
            const numberOfHearts = 100;
            const fragment = document.createDocumentFragment();

            for (let i = 0; i < numberOfHearts; i++) {
                const heart = document.createElement('div');
                heart.classList.add('heart');

                // 随机位置、大小和动画延迟
                const size = Math.random() * 20 + 10; // 10px - 30px
                const left = Math.random() * 100; // 0% - 100%
                const top = Math.random() * 100;
                const animationDelay = Math.random() * 5; // 0-5秒延迟
                const duration = Math.random() * 5 + 5; // 5-10秒动画时间

                heart.style.width = `${size}px`;
                heart.style.height = `${size}px`;
                heart.style.left = `${left}vw`;
                heart.style.top = `${top}vh`;
                heart.style.animationDuration = `${duration}s`;
                heart.style.animationDelay = `-${animationDelay}s`;

                fragment.appendChild(heart);
            }

            container.appendChild(fragment);
        }

        // 为文本添加额外效果
        function enhanceText() {
            const text = document.querySelector('.love-text');
            const letters = text.textContent.split('');
            text.innerHTML = '';

            letters.forEach((letter, i) => {
                const span = document.createElement('span');
                span.textContent = letter;
                span.style.animationDelay = `${i * 0.2}s`;
                text.appendChild(span);
            });
        }

        // 添加3D旋转效果
        document.addEventListener('mousemove', (e) => {
            const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
            const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
            document.querySelector('.love-text').style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
        });

        // 初始化效果
        window.onload = function () {
            createHearts();
            enhanceText();
        };
    </script>
</body>

</html>